import { cloneDeep } from 'lodash-es'
import axios from '@/api/index'

const HomeChart = {
  // 方格数据
  dataList: [],
  // 普通柱状图option
  barOption: {
    title: { text: '普通柱状图示例' },
    tooltip: {},
    legend: {
      data: ['销量'],
      top: 'bottom'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: { type: 'value' },
    series: [{
      name: '销量',
      type: 'bar',
      // data: [5, 20, 36, 10, 10, 20, 5]
      data: []
    }]
  },
  // 堆叠柱状图option
  stackedBarOption: {
    title: { text: '堆叠柱状图示例' },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    legend: {
      data: ['直接访问', '邮件营销', '联盟广告'],
      top: 'bottom'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '直接访问',
        type: 'bar',
        stack: '广告',
        // data: [320, 332, 301, 334, 390, 330, 320]
        data: []
      },
      {
        name: '邮件营销',
        type: 'bar',
        stack: '广告',
        // data: [120, 182, 191, 234, 290, 330, 310]
        data: []
      },
      {
        name: '联盟广告',
        type: 'bar',
        stack: '广告',
        // data: [220, 182, 191, 234, 290, 330, 310]
        data: []
      }
    ]
  },
  // 趋势柱状图option
  trendBarOption: {
    grid: {
      top: "10%",
      left: "1%",
      right: "1%",
      bottom: "0%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#000",
        interval: 0,
        // fontSize: 14,
        rotate: 20,
        // formatter: function (value) {
        //   return value.length > 4 ? value.substr(0, 4) + "..." : value;
        // },
      },
      axisLine: {
        lineStyle: {
          color: "#000",
        },
      },
      // data: ["尿酸升高", "甘油三脂升高", "低密度脂蛋白升高", "总胆固醇升高", "空腹血糖升高", "尿比重升高"],
      data: [],
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 100,
      axisLabel: {
        color: "#000",
        formatter: (_, index) => {
          const data = ["0", "2021", "2022", "2023", "2024", "2025"]
          return _ == 0 ? "" : data[index];
        },
      },
      axisLine: {
        lineStyle: {
          color: "#000",
        },
      },
    },
    // series: [
    //   {
    //     name: "尿酸升高",
    //     type: "bar",
    //     stack: "total",
    //     barWidth: "60%",
    //     data: new Array(6).fill(20),
    //     label: {
    //       show: true,
    //       formatter: (params) => {
    //         const data = ["0%", "0.00%", "0.00%", "0.37%", "0.76%", "0.08%"]
    //         if (params.seriesIndex == data.length - 1) {
    //           return "";
    //         }
    //         return data[params.dataIndex];
    //       }
    //     }
    //   },
    //   {
    //     name: "甘油三脂升高",
    //     type: "bar",
    //     stack: "total",
    //     barWidth: "60%",
    //     data: new Array(6).fill(20),
    //     label: {
    //       show: true,
    //       formatter: (params) => {
    //         const data = ["0%", "0.00%", "0.00%", "0.00%", "0.94%", "0.19%"]
    //         if (params.seriesIndex == data.length - 1) {
    //           return "";
    //         }
    //         return data[params.dataIndex];
    //       }
    //     }
    //   },
    //   {
    //     name: "低密度脂蛋白升高",
    //     type: "bar",
    //     stack: "total",
    //     barWidth: "60%",
    //     data: new Array(6).fill(20),
    //     label: {
    //       show: true,
    //       formatter: (params) => {
    //         const data = ["0%", "0.00%", "0.00%", "0.35%", "0.66%", "0.14%"]
    //         if (params.seriesIndex == data.length - 1) {
    //           return "";
    //         }
    //         return data[params.dataIndex];
    //       }
    //     }
    //   },
    //   {
    //     name: "总胆固醇升高",
    //     type: "bar",
    //     stack: "total",
    //     barWidth: "60%",
    //     data: new Array(6).fill(20),
    //     label: {
    //       show: true,
    //       formatter: (params) => {
    //         const data = ["0%", "0.00%", "0.00%", "0.31%", "0.66%", "0.11%"]
    //         if (params.seriesIndex == data.length - 1) {
    //           return "";
    //         }
    //         return data[params.dataIndex];
    //       }
    //     }
    //   },
    //   {
    //     name: "空腹血糖升高",
    //     type: "bar",
    //     stack: "total",
    //     barWidth: "60%",
    //     data: new Array(6).fill(20),
    //     label: {
    //       show: true,
    //       formatter: (params) => {
    //         const data = ["0%", "0.00%", "0.00%", "0.00%", "0.65%", "0.12%"]
    //         if (params.seriesIndex == data.length - 1) {
    //           return "";
    //         }
    //         return data[params.dataIndex];
    //       }
    //     }
    //   },
    //   {
    //     name: "尿比重升高",
    //     type: "bar",
    //     stack: "total",
    //     barWidth: "60%",
    //     data: new Array(6).fill(20),
    //     label: {
    //       show: true,
    //       formatter: (params) => {
    //         const data = ["0%", "0.00%", "0.00%", "0.49%", "0.22%", "0.00%"]
    //         if (params.seriesIndex == data.length - 1) {
    //           return "";
    //         }
    //         return data[params.dataIndex];
    //       }
    //     }
    //   }
    // ],
    series: [],
  }
}

const buildChartOption = () => cloneDeep(HomeChart)

const getChartData = async (startDate, endDate) => {
  const chartData = buildChartOption()
  try {
    // const [res1, res2, res3, res4] = await Promise.all(
    const [res1, res2, res3, res4] = await Promise.allSettled(
      [
        axios.get('/test', {
          params: { startDate, endDate }
        }),
        axios.get('/sales', {
          params: { startDate, endDate }
        }),
        axios.get('/ads', {
          params: { startDate, endDate }
        }),
        axios.get('/trends', {
          params: { startDate, endDate }
        })
      ]);

    // console.log(res1, res2, res3, res4)

    if (res1.status === 200) {
      chartData.dataList = res1.data
    } else if (res1.status === 'fulfilled') {
      chartData.dataList = res1.value.data
    }
    if (res2.status === 200) {
      chartData.barOption.series[0].data = res2.data
    } else if (res2.status === 'fulfilled') {
      chartData.barOption.series[0].data = res2.value.data
    }
    if (res3.status === 200) {
      chartData.stackedBarOption.series[0].data = res3.data.item1
      chartData.stackedBarOption.series[1].data = res3.data.item2
      chartData.stackedBarOption.series[2].data = res3.data.item3
    } else if (res3.status === 'fulfilled') {
      chartData.stackedBarOption.series[0].data = res3.value.data.item1
      chartData.stackedBarOption.series[1].data = res3.value.data.item2
      chartData.stackedBarOption.series[2].data = res3.value.data.item3
    }
    if (res4.status === 200) {
      if (res4.data.rowList && res4.data.rowList.length > 0) {
        const rowList = res4.data.rowList, yearList = res4.data.yearList;
        let xAxisData = [], expandData = [];
        rowList.map(item => {
            xAxisData.push(item[0])
            expandData.push(["0%", ...item.splice(1)])
        });
        chartData.trendBarOption.xAxis.data = xAxisData
        chartData.trendBarOption.yAxis.axisLabel.formatter = (_, index) => {
          const data = ["0", ...yearList];
          return _ == 0 ? "" : data[index];
        };
        const seriesData = expandData[0].map((_, i) => expandData.map(row => row[i]));
        chartData.trendBarOption.series = rowList.map(item => {
          return {
            name: item[0],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            data: new Array(6).fill(20),
            label: {
              show: true,
              formatter: (params) => {
                if (params.seriesIndex == seriesData.length - 1) {
                  return "";
                }
                return seriesData[params.seriesIndex][params.dataIndex];
              },
            },
          }
        })
      }
    } else if (res4.status === 'fulfilled') {
      if (res4.value.data.rowList && res4.value.data.rowList.length > 0) {
        const rowList = res4.value.data.rowList, yearList = res4.value.data.yearList;
        let xAxisData = [], expandData = [];
        rowList.map(item => {
            xAxisData.push(item[0])
            expandData.push(["0%", ...item.splice(1)])
        });
        chartData.trendBarOption.xAxis.data = xAxisData
        chartData.trendBarOption.yAxis.axisLabel.formatter = (_, index) => {
          const data = ["0", ...yearList];
          return _ == 0 ? "" : data[index];
        };
        const seriesData = expandData[0].map((_, i) => expandData.map(row => row[i]));
        chartData.trendBarOption.series = rowList.map(item => {
          return {
            name: item[0],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            data: new Array(6).fill(20),
            label: {
              show: true,
              formatter: (params) => {
                if (params.seriesIndex == seriesData.length - 1) {
                  return "";
                }
                return seriesData[params.seriesIndex][params.dataIndex];
              },
            },
          }
        })
      }
    }
  } catch (error) {
    console.error(error)
  }
  return chartData;
}

export { buildChartOption, getChartData }